<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Vue - Clean Minimal eCommerce HTML Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS here -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min1.css}">
    <link rel="stylesheet" th:href="@{/css/owl.carousel.min.css}">
    <link rel="stylesheet" th:href="@{/css/animate.min.css}">
    <link rel="stylesheet" th:href="@{/css/magnific-popup.css}">
    <link rel="stylesheet" th:href="@{/css/fontawesome-all.min.css}">
    <link rel="stylesheet" th:href="@{/css/flaticon.css}">
    <!--<link rel="stylesheet" th:href="@{/css/meanmenu.css}">-->
    <!--轮播图-->
    <link rel="stylesheet" th:href="@{/css/slick.css}">
    <link rel="stylesheet" th:href="@{/css/default1.css}">
    <!--主排版-->
    <link rel="stylesheet" th:href="@{/css/style1.css}">
    <link rel="stylesheet" th:href="@{/css/responsive1.css}">
    <link rel="stylesheet" th:href="@{/css/my.css}">

    <style>
        .product:hover
        {
            /*border: solid gray 0.5px;*/
            box-shadow: 0 0 4px #b4b4b4
        }
        #XuanFu
        {
            width:150px;
            height: 75px;
            position:fixed;
            left:3%;
            top:50%;
            border-radius:50%;
            text-align: right;
        }
        /*#XuanFu:hover*/
        /*{*/
            /*!*border: solid gray 0.5px;*!*/
            /*box-shadow: 0 0 4px #b4b4b4*/
        /*}*/
        #div{
            /* 设置颜色 */
            background-color:black;
            color:chartreuse;
            /* 边框圆角 */
            border-radius: 10px;
            /* 设置文字居中 */
            text-align: center;
            font-size: 15px;
        }
    </style>

</head>
<body>


<!-- preloader -->
<div id="preloader">
    <div class="preloader">
        <span></span>
        <span></span>
    </div>
</div>
<!-- preloader end  -->

<div id="XuanFu">
    <h4 th:text="${msg2}" style="color: white;background-color: red;text-align: center"></h4>
</div>

<!-- header start -->
<header>
    <div class="header-area header-3 pt-35 pb-35">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-4 col-lg-3 col-md-3 col-7 d-none d-lg-block d-flex align-items-center d-xs-disable">
                    <div class="basic-bar info-bar">
                        <span class="bar1"></span>
                        <span class="bar2"></span>
                        <span class="bar3"></span>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-5 col-md-4 col-5">
                    <div class="logo text-left text-lg-center">
                        <a th:href="@{/toDashboardUser2}"><img th:src="@{/img/logo.png}" alt=""></a>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-8 col-7 pl-0">
                    <div class="header-right header-right-3 f-right">
                        <ul>
                            <li class="d-shop-cart"><a th:href="@{/toMine}" th:text="${session.username}"></a>
                                <ul class="minicart">
                                    <div class="cart-img" style="border-left: 132px">
                                        <p></p>
                                        <h5 align="center" th:text="'用户名：'+${session.username}">用户名：</h5>
                                        <p></p>
                                        <a th:href="@{/toUpdPwd/}+${session.uid}" class="">修改密码</a>
                                        <p></p>
                                        <a th:href="@{/signOut}" class="">退出登录</a>
                                        <hr>
                                        <h5>购物车</h5>
                                        <div th:each="lists:${carts}">
                                            <h7 style="color: red" th:text="${lists.getPname()}+'*1'"></h7>
                                            <p></p>
                                        </div>
                                        <a th:href="@{/toCart/}+${session.uid}">结算</a>
                                    </div>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- side menu -->
    <div class="extra-info">
        <div class="close-icon">
            <button>
                x
            </button>
        </div>
        <div class="logo-side">
            <a th:href="@{/toDashboardUser2}">
                <img th:src="@{/img/logo-white.png}" alt="">
            </a>
        </div>
        <div class="side-info mb-30">
            <div class="main-menu side-menu">
                <nav id="mobile-menu-3">
                    <ul>
                        <li>
                            <a th:href="@{/toDashboardUser2}">Home <i class="flaticon-right-arrow">-></i></a>
                        </li>
                        <li>
                            <a th:href="@{/toDashboardUser2}">Cart <i class="flaticon-right-arrow">-></i></a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>
<!-- header end -->

<main>
    <!-- slider-area start -->
    <!--轮播图-->
    <section class="slider-area pos-relative">
        <div class="container">
            <div class="slider-active-5 slider-3 ">
                <div class="single-slider slide-height-5 pos-relative d-flex align-items-center" data-background="/img/banshu.png">
                    <div class="row">
                        <div class="col-xl-7">
                            <div class="slide-content slide-content-5  pl-60">
                                <span data-animation="fadeInRight" data-delay=".4s" style="color:white">winter Collection</span>
                                <h1 data-animation="fadeInUp" data-delay=".6s" style="color:white">&#12288</h1>
                                <div class="slide-btn">
                                    <a class="btn theme-btn" th:href="@{#}" data-animation="fadeInLeft" data-delay=".8s">shop now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="single-slider slide-height-5 pos-relative d-flex align-items-center" data-background="/img/zhizhimeimei.png">
                    <div class="row">
                        <div class="col-xl-7">
                            <div class="slide-content slide-content-5  pl-60">
                                <span data-animation="fadeInRight" data-delay=".4s" style="color:#a14838">winter Collection</span>
                                <h1 data-animation="fadeInUp" data-delay=".6s" style="color:white">&#12288</h1>
                                <div class="slide-btn">
                                    <a class="btn theme-btn" th:href="@{#}" data-animation="fadeInLeft" data-delay=".8s">shop now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="single-slider slide-height-5 pos-relative d-flex align-items-center" data-background="/img/niujiaobao.png">
                    <div class="row">
                        <div class="col-xl-7">
                            <div class="slide-content slide-content-5  pl-60">
                                <span data-animation="fadeInRight" data-delay=".4s" style="color:#a14838">winter Collection</span>
                                <h1 data-animation="fadeInUp" data-delay=".6s" style="color:white">&#12288</h1>
                                <div class="slide-btn">
                                    <a class="btn theme-btn" th:href="@{#}" data-animation="fadeInLeft" data-delay=".8s">shop now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="single-slider slide-height-5 pos-relative d-flex align-items-center" data-background="/img/qingrulao.png">
                    <div class="row">
                        <div class="col-xl-7">
                            <div class="slide-content slide-content-5  pl-60">
                                <span data-animation="fadeInRight" data-delay=".4s" style="color:#a14838">winter Collection</span>
                                <h1 data-animation="fadeInUp" data-delay=".6s" style="color:white">&#12288</h1>
                                <div class="slide-btn">
                                    <a class="btn theme-btn" th:href="@{#}" data-animation="fadeInLeft" data-delay=".8s">shop now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- slider-area end -->
    <p></p>
    <p></p>
    <section class="slider-area pos-relative">
        <div class="container">
            <div class="row">
                <div class="padding-1 padding-2 padding-3">
                    <div class="banner mb-5">

                        <a th:href="@{/toProductDetail/1}"><img th:src="@{/img/banshu.png}" alt="" class="mycard"></a>
                        <p></p>

                        <div class="pro-cat mb-10">
                            <a th:href="@{#}">需冷藏，开封即食</a>
                        </div>
                        <h4>
                            <a th:href="@{/toProductDetail/1}">半熟芝士</a>
                        </h4>
                        <div class="product-meta">
                            <div class="pro-price">
                                <span>￥19.9</span>
                                <span class="old-price">￥40</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="padding padding-2 padding-3">
                    <div class="banner mb-5">
                        <a th:href="@{/toProductDetail/4}">
                            <img th:src="@{/img/zhizhimeimei-card.png}" alt="" class="mycard"></a>
                        <p></p>

                        <div class="pro-cat mb-10">
                            <a th:href="@{#}">需冷藏，开封即食</a>
                        </div>
                        <h4>
                            <a th:href="@{/toProductDetail?id=4}">芝芝莓莓</a>
                        </h4>
                        <div class="product-meta">
                            <div class="pro-price">
                                <span>￥26</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="padding-1 padding-2 padding-3">
                    <div class="banner mb-5">
                        <a th:href="@{/toProductDetail/2}"><img th:src="@{/img/niujiaobao-card.png}" alt="" class="mycard"></a>
                        <p></p>

                        <div class="pro-cat mb-10">
                            <a th:href="@{#}">常温保存，开封即食</a>
                        </div>
                        <h4>
                            <a th:href="@{/toProductDetail/2}">牛角包</a>
                        </h4>
                        <div class="product-meta">
                            <div class="pro-price">
                                <span>￥8.9</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="padding-1 padding-2 padding-3">
                    <div class="banner mb-5">
                        <a th:href="@{/toProductDetail/5}"><img th:src="@{/img/qingrulao-card.png}" alt="" class="mycard"></a>
                        <p></p>

                        <div class="pro-cat mb-10">
                            <a th:href="@{#}">冷藏保存，开封即食</a>
                        </div>
                        <h4>
                            <a th:href="@{/toProductDetail/5}">轻乳酪蛋糕</a>
                        </h4>
                        <div class="product-meta">
                            <div class="pro-price">
                                <span>￥19.9</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <!--计时器-->
                <div style="padding-top:10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;margin-bottom: 40px;" th:width="200px"  class="product">
                    <img th:src="@{/img/miaosha.png}">
                    <p></p>
                    <h4 style="text-align: center;color: red">面包秒杀</h4>
                    <p></p>
                    <div id="div">
                    </div>
                    <p></p>
                    <script>
                        // 获取div
                        var div = document.getElementById('div');
                        // 先调用一次函数，如果不调用刷新的时候会有一点时间显示的是空白
                        count();
                        // 定时器
                        //=>箭头函数，是ES6新增的函数，表示一个匿名函数
                        // =>前面是参数，后面是函数
                        setInterval(() =>count() , 1000);

                        // 封装函数，计算倒计时
                        function count(){
                            var dateNow = +new Date();//当前时间的毫秒数
                            var date2 = +new Date('2023/12/21 00:00:00')//截止时间的毫秒数

                            var cha = date2 - dateNow;//截止时间减去当前时间的毫秒

                            // 计算天时分秒
                            tian = parseInt(cha / (24 * 3600 * 1000)) //天数 1s = 1000ms
                            var yu1 = cha % (24 * 3600 * 1000) //余数

                            hours = parseInt(yu1 / (3600 * 1000)) //小时
                            var yu2 = yu1 % (3600 * 1000)

                            minutes = parseInt(yu2 / (60 * 1000)) //分钟
                            var yu3 = yu2 % (60 * 1000);

                            seconds = parseInt(yu3 / 1000) //秒
                            // 输出 ${}字符串拼接
                            div.innerHTML = `${hours}小时，${minutes}分，${seconds}秒`
                        }

                    </script>

                    <span></span>
                </div>
            </div>
            <div class="col-md-2" th:each="lists:${products1}">
                <div style="padding-top:10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;margin-bottom: 40px;" th:width="200px"  class="product">
                    <a th:href="@{/toProductDetail/}+${lists.getId()}">
                        <img th:src="${lists.getUrl()}">
                        <p></p>
                        <h4 th:text="${lists.getPname()}">半熟芝士</h4>
                        <span></span>
                        <h7 style="color: red" th:text="${lists.getDetail()}"></h7>
                        <p></p>
                        <h6 style="color: red" th:text="'￥'+${lists.getPprice()}">￥109</h6>
                        <h6 style="color: red" th:text="${lists.getSaveway()}"></h6>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-3" th:each="lists:${prducts}">
                <div style="padding-top:10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;margin-bottom: 40px;" th:width="200px"  class="product">
                    <a th:href="@{/toProductDetail/}+${lists.getId()}">
                        <img th:src="${lists.getUrl()}">
                        <p></p>
                        <h4 th:text="${lists.getPname()}">半熟芝士</h4>
                        <span></span>
                        <h7 style="color: red" th:text="${lists.getDetail()}"></h7>
                        <p></p>
                        <h6 style="color: red" th:text="'￥'+${lists.getPprice()}">￥109</h6>
                        <h6 style="color: red" th:text="${lists.getSaveway()}"></h6>
                    </a>
                </div>
            </div>
        </div>
    </div>

</main>



<script th:inline="javascript">
    num5 = [[${num5}]];
    console.log(num5);
    if (num5!=null)
    {

        alert("无权访问")
    }
    $('#btn2').click(function(){
        $('#XuanFu').hide();
    })
</script>



<!-- JS here -->
<script data-cfasync="false" th:src="@{/js/email-decode.min.js}"></script>
<script th:src="@{/js/jquery-1.12.4.min.js}"></script>
<script th:src="@{/js/popper.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/owl.carousel.min.js}"></script>
<script th:src="@{/js/isotope.pkgd.min.js}"></script>
<script th:src="@{/js/one-page-nav-min.js}"></script>
<script th:src="@{/js/slick.min.js}"></script>
<script th:src="@{/js/jquery.meanmenu.min.js}"></script>
<script th:src="@{/js/ajax-form.js}"></script>
<script th:src="@{/js/wow.min.js}"></script>
<script th:src="@{/js/jquery.scrollUp.min.js}"></script>
<script th:src="@{/js/jquery.final-countdown.min.js}"></script>
<script th:src="@{/js/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
<script th:src="@{/js/plugins.js}"></script>
<script th:src="@{/js/main1.js}"></script>
</body>
</html>